<!--所有订单-->
<template>
  <div class="order-all-wrap clear" >
    <el-menu>
      <h2 class="h1">所有订单</h2>
    </el-menu>
    <!--  输入框区域-->
    <div class="order-all-input clear">
      <div class="order-all-input-box clear">
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item label="订单编号: ">
            <el-input v-model="formInline.id"></el-input>
          </el-form-item>
          <el-form-item label="下单时间：" class="order-all-input-box-right-common">
            <el-date-picker
                v-model="formInline.from"
                type="date">
            </el-date-picker>
            <span> 至 </span>
            <el-date-picker
                v-model="formInline.to"
                type="date">
            </el-date-picker>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item label="商品名称:">
            <el-input v-model="formInline.user"></el-input>
          </el-form-item>
          <el-form-item label="物流方式:"  class="order-all-input-box-right-common">
            <el-select v-model="formInline.region" placeholder="全部">
            </el-select>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item label="订单类型:">
            <el-select v-model="formInline.orderstyle" placeholder="请选择">
            </el-select>
          </el-form-item>
          <el-form-item label="付款方式:"  class="order-all-input-box-right-common">
            <el-select v-model="formInline.paymentType" placeholder="全部">
              <el-option label="全部" value="quanbu"></el-option>
              <el-option label="微信支付" value="weixin"></el-option>
              <el-option label="支付宝支付" value="zhifubao"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item label="维权状态:"  class="order-all-input-box-right-common">
            <el-select v-model="formInline.activist" placeholder="全部">
              <el-option label="全部" value="quanbu"></el-option>
              <el-option label="退款中" value="tuikuangzhong"></el-option>
              <el-option label="退款成功" value="tuikuangchenggong"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
            <el-button type="primary" @click="screening()">筛选</el-button>
            <el-button>批量导出</el-button>
            <el-button>查看已生成报表</el-button>
      </div>
    </div>
    <!--tab切换列表区域-->
    <div class="order-all-tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="全部"></el-tab-pane>
        <el-tab-pane label="待付款" name="待付款"></el-tab-pane>
        <el-tab-pane label="待发货" name="待发货"></el-tab-pane>
        <el-tab-pane label="已发货" name="已发货"></el-tab-pane>
<!--        <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
        <el-tab-pane label="已关闭" name="已关闭"></el-tab-pane>
        <el-tab-pane label="退款中" name="退款中"></el-tab-pane>-->
      </el-tabs>
    </div>

    <!--  列表数据-->
    <div class="order-all-list">
      <el-table
          :data="showData"
          height="310px"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="订单">
        </el-table-column>
        <el-table-column
            prop="name"
            label="客户">
        </el-table-column>
        <el-table-column
            prop="message"
            label="客户留言">
        </el-table-column>
        <el-table-column
            prop="paymentType"
            label="支付方式">
        </el-table-column>
        <el-table-column
            prop="status"
            label="订单状态"
        >
        </el-table-column>
        <el-table-column
            prop="totalPrice"
            label="订单总价">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="下单时间">
        </el-table-column>
        <el-table-column
            prop="paymentTime"
            label="支付时间">
        </el-table-column>
        <el-table-column
            prop="sendTime"
            label="发货时间">
        </el-table-column>
        <el-table-column
            prop="address"
            label="收货地址">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <router-link  :to="{path: '/orderdetails', query: {id: scope.row.id}}">查看</router-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="order-pagination clear">
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handlePageChange"
            :total="total"
            :current-page="currentPage"
            :page-size="limit"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>

import {getListOrder, getSelectOrder} from "@/http/orderService";


export default {
  name: "OrderAll",
  data() {
    return {
      formInline: {
        id: '',
        region: '',
        orderstyle: '',
        paymentType: '',
        activist: '',
        from: '',
        to: '',
      },
      activeName: '全部',
      tableData: [],
      showData: [],
      tab: null,
      options:[5,10,15],
      currentPage: 1,//当前页
      total:0,//总数
      limit:5,//每页显示数量
    }
  },
//渲染列表数据
  created() {
    this.init();
  },
  methods: {
    init() {
        getListOrder({
          "page":this.currentPage + "",
          "limit":"5"
        })
            .then((res) => {
              this.tableData = res.data.data
              this.showData = res.data.data;
              this.total = Number(res.data.count);

            })
            .catch((err) => {
              console.log(err)
            })
     },


    //筛选
    screening(){
      console.log("from",this.$refs.formInline)
      getSelectOrder({
        "id":this.$refs.formInline.model.id,
        "paymentType":this.$refs.formInline.model.paymentType,
        "from":this.$refs.formInline.model.from,
        "to":this.$refs.formInline.model.to,
        "page":"1",
        "limit":"5"
      })
          .then((res) => {
            this.tableData = res.data.data
            this.showData = res.data.data;
            this.total = Number(res.data.count);
          })
          .catch((err) => {
            console.log(err)
          })
    },


//点击切换
    handleClick(tab) {
      this.tab = tab;
      // 处理全部
      if (tab.name === "全部") {
        this.showData = this.tableData;
      }else {
        this.showData = this.tableData.filter(item => item.status === tab.name);
      }
    },

    //分页
    // 现在显示当前页的第几页
    handlePageChange(current) {
      this.currentPage=current
      console.log("当前页面",this.currentPage);
      this.init();
      this.handleClick(this.tab)
    },
  }
}
</script>

<style lang="scss" scoped>
.h1{
  padding: 0 15px 20px;
  font-weight: 200;
}
.order-all-wrap {
  background-color: #fff;
  padding: 30px;
  .order-all-input {
    background-color: #F3F3F3;
    padding: 15px;
  }
  .order-all-tab {
    padding: 15px 0 -1px;

  }
}
.el-form--inline .el-form-item {
  margin-right: 61px;
}

.order-all-list {
  .order-pagination {
    margin-top: 10px;
    text-align: right;
  }
}
.demo-form-inline {
  width:100%;
  text-align: left;
  .order-all-input-box-right-common {

  }
}
</style>